<template>
  <el-table
    v-loading="loading"
    :data="tableData"
    stripe
    height="100%"
    max-height="100%"
  >
    <slot></slot>
  </el-table>
  <!-- 分页 -->
  <div class="pt-3">
    <div class="flex flex-row">
      <div class="overflow-x-auto sm:ml-auto">
        <el-pagination
          :current-page="currentPage"
          :page-size="pageSize"
          layout="total, prev, pager, next"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
  </div>
</template>

<script setup>
// eslint-disable-next-line no-unused-vars
const props = defineProps({
  tableData: {
    type: Array,
    default: () => [],
  },
  loading: {
    type: Boolean,
    default: true,
  },
  total: {
    type: Number,
    default: 0,
  },
  currentPage: {
    type: Number,
    default: null,
  },
  pageSize: {
    type: Number,
    default: null,
  },
});

const emit = defineEmits(["handleSizeChange", "handleCurrentPageChange"]); // 修正的事件名称

function handleSizeChange(val) {
  console.log("11");
  console.log(`${val} items per page`);
  emit("handleSizeChange", val);
}

function handleCurrentChange(val) {
  console.log("22");
  console.log(`current page: ${val}`);
  emit("handleCurrentPageChange", val); // 修正的事件名称
}
</script>
